<template>
    <div class="allbox">
       <div class="all">
            <div class="box-left">
                <img class="girl" src="../assets/imgs/girl.svg" alt="">
            </div>
            <div class="middle">
                <h3>登录</h3>
                <p class="allname">医疗服务后台管理系统</p>
                <div class="login">
                    <span>账号</span>
                    <input type="text" id="login" placeholder="请输入你的账号" style="font-size: 14px; color: rgb(204, 204, 204);">
                </div>
                <div class="psw">
                    <span>密码</span>
                    <input type="text" id="psw" placeholder="请输入你的密码" style="font-size: 14px; color: rgb(204, 204, 204);">
                </div>
                
                <div class="del">
                    <p>忘记密码请联系管理员</p>
                </div>
                <div @click="login" class="button">登录</div>
            </div>
            <div class="box-right">
                <img class="boy" src="../assets/imgs/boy.svg" alt="">
            </div>
       </div>
    
    </div>
  </template>
  
  <script>
  export default {
    name: 'LoginView',
    components:{},
    methods:{
        login(){
            this.$router.push('/comment')
        }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  .allbox{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(242, 242, 242, 0.498039215686275);
  }
  .all{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    width: 1000px;
    height:560px;
    margin: auto;
  }
  .girl,.boy{
    width: 300px;
    height: 500px;
  }
  .middle{
    width: 400px;
    height: 500px;
    background-color: rgba(0, 110, 255, 1);
    border: none;
    border-radius: 4px;
    color: #fff;
    text-align: center;
  }
  h3{
    font-size: 25px;
    margin: 25px 0 20px 0;
  }
  .allname{
    font-size: 17px;
  }
  .login,.psw{
    display: flex;
    align-items: center;
    border-width: 0px;
    /* position: absolute;
    left: 0px;
    top: 0px; */
    width: 358px;
    height: 48px;
    margin:30px auto;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 2px;
    box-shadow: none;
    font-weight: 400;
    font-style: normal;
    text-align: left;
  }
  .login span,.psw span{
    color: black;
    display: inline-block;
    font-size: 14px;
    margin: 0 20px;
  }
  #login,#psw{
    outline: none;
    border:0;
    width: 281px;
    height: 41px;
    padding: 2px 2px 2px 2px;
  }

  .del{
    display: flex;
    justify-content: flex-end;
    width: 358px;
    margin:0 auto 10px;
  }
  .del p{
    font-size: 13px;
  }
  .button{
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    width: 358px;
    height: 48px;
    margin:20px auto;
    background-color: rgba(255, 145, 56, 1);
    border: none;
    border-radius: 2px;
    font-weight: 400;
    font-style: normal;
    font-size: 17px;
    letter-spacing: 1.2px;
    color: #FFFFFF;
    line-height: 20px;
  }
  </style>